﻿@model Epi.Web.MVC.Models.PrintResponseModel

@{
    ViewBag.Title = "Print";
}

<style type="text/css" media="screen, print">

.printable {
border: 1px dotted #CCCCCC ;
padding: 10px 10px 10px 10px ;
margin-top: -50px;
}

.surveyinfo 
{
    margin: 1px 0 10px;
    font: 12pt "Segoe UI", Sans-serif;
    }

table { 
		width: 100%; 
		border-spacing: 1px !important;
		border-collapse: collapse; 
		border: 1px solid #ccc !important;
		padding: 3px 5px;
		font-family: "Segoe UI", Sans-Serif;
		font-size:10pt;
	}
	/* Zebra striping */
	 tr:nth-of-type(even) { 
		background: #e5e5e5; 
	}
	 th { 
		background: white;
		/*color:#2878ec;  */
		font-size:12pt;
		font-weight: bold; 
		border-bottom: 2px solid #ccc !important;
		text-align:left;
		 background: #b2b2b2 !important;
        
	}
	 td, th { 
		padding: 6px; 
		/*border-bottom: 1px solid #2878ec; */
		text-align: left; 
		vertical-align:top;
		max-width: 140px;
		border: 1px solid #ccc !important;
		
	}
	
	td th:nth-of-type(1) { width:50%; }
	td td:nth-of-type(1) { border-right: 1px solid #ccc !important;}
	button.exitsurvey
    {
        margin-right:5px;
        background: #E5E5E5 !important;
        color: #3f3f3f !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
        -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    } 
	
</style>
<script language="javascript" type="text/javascript">
    function Print(divID) {
          
    //            var divElements = document.getElementById(divID).innerHTML;
    //           
    //          var oldPage = document.body.innerHTML;
    //            document.body.innerHTML =
    //              "<html><head><title></title></head><body>" +
    //              divElements + "</body>";
    //             window.print();

        //          document.body.innerHTML = oldPage;

        $(".printable").print();
             
        return (false);

    }
</script>
<br />
<div id="Print1" align="right">
	<button class="exitsurvey"  name="PrintButton" id="PrintButton" onclick="Print('printable')" type="button" >Print</button>
</div>
<br />
<div id="recordstable" class="printable">
<p class="surveyinfo">Survey Name: <strong>@Model.SurveyName</strong> </p>
<p class="surveyinfo">Date: <strong>@Model.CurrentDate</strong> </p>
@for (int i = 1; Model.NumberOfPages + 1 > i; i++)
{
    <br />
    <p class="surveyinfo"><strong>Page @i</strong></p>
    
    <table id="printtable">
      <tr>
        <th scope="col">Prompt</th>
        <th scope="col">Response</th>
      </tr>
      @foreach (var item in Model.ResponseList)
      {
          if (item.PageNumber == i)
          {
                <tr>
                    <td align =left scope="row">@item.Question</td>
                    <td align= left>@item.Value</td>
                </tr>
          }
      }
    </table>
}

</div>
<br />
<div id="Print2" align="right">
	<button class="exitsurvey"  name="PrintButton2" id="PrintButton2" onclick="Print('printable')" type="button" >Print</button>
</div>    

